<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/element-ui/element-ui@2.9.1.css" />
    <!-- 先引入 Vue -->
    <script src="/static/element-ui/vue@2.6.10.js"></script>
    <!-- 引入组件库 -->
    <script src="/static/element-ui/element-ui@2.9.1.js"></script>
    <script src="/static/element-ui/axios@0.18.0.min.js"></script>
    <script src="/static/js/rules.js"></script>
    <style>
      .el-main a {
        text-decoration: none;
        color: #333;
      }
    </style>
  </head>

  <body>
    <el-container>
      <div id="app">
        <el-breadcrumb separator="/">
          <template v-for="item in navs">
            <el-breadcrumb-item
              ><a :href="item.url"
                ><i class="el-icon-refresh"></i>{{ item.name }}</a
              >
            </el-breadcrumb-item>
          </template>
        </el-breadcrumb>

        <el-header>
          <h2>服务器列表</h2>
        </el-header>

        <el-main>
          <!-- 添加任务表单开始 -->
          <template>
            <el-form
              :inline="true"
              :model="formData"
              class="demo-form-inline"
              size="small"
              :rules="rules"
              ref="formData"
            >
              <el-form-item label="服务器名称" prop="server_name">
                <el-input
                  v-model="formData.server_name"
                  placeholder="名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="服务器地址" prop="server_host">
                <el-input v-model="formData.server_host" placeholder="地址">
                </el-input>
              </el-form-item>
              <el-form-item label="服务器账号">
                <el-input
                  v-model="formData.server_username"
                  placeholder="账号(可选)"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="服务器密码">
                <el-input
                  v-model="formData.server_password"
                  placeholder="密码(可选)"
                >
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="addServer">添加</el-button>
              </el-form-item>
            </el-form>
          </template>
          <!-- 添加任务表单结束 -->

          <!-- 显示任务表格开始 -->
          <template>
            <el-table :data="tableData" stripe border style="width: 100%;">
              <el-table-column
                type="index"
                label="序号"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="server_name"
                label="服务器名称"
                width="120"
              ></el-table-column>
              <el-table-column label="服务器地址">
                <template slot-scope="scope">
                  <a :href="scope.row.server_host"
                    >{{ scope.row.server_host }}</a
                  >
                </template>
              </el-table-column>

              <el-table-column label="移除" width="120">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="removeServer(scope.row)"
                    type="warning"
                  >
                    <i class="el-icon-delete"></i>移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 显示任务表格结束 -->
        </el-main>
      </div>
    </el-container>
  </body>

  <script>
    new Vue({
      el: "#app",
      mixins: [rules],
      data: {
        tableData: [],
        formData: {
          server_name: "",
          server_host: "",
          server_username: "",
          server_password: "",
        },
        navs: [
          {
            name: "刷新列表",
            url: "/server-vue",
          },
        ],
      },
      methods: {
        clearFormData: function () {
          this.formData.server_name = "";
          this.formData.server_host = "";
          // 添加权限校验支持
          this.formData.server_username = "";
          this.formData.server_password = "";
        },

        getServers: function () {
          axios
            .get("/api/servers")
            .then((response) => {
              this.tableData = response.data;
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "加载失败",
              });
            });
        },
        addServer: function () {
          this.$refs["formData"].validate((valid) => {
            if (valid) {
              // 可以是https
              //   this.formData.server_host = "http://" + this.formData.server_host;
              axios.post("/api/addServer", this.formData).then((response) => {
                this.$message({
                  type: response.data.message_type,
                  message: response.data.message,
                });
                this.clearFormData();
                this.getServers();
              });
            }
          });
        },

        removeServer: function (row) {
          this.$confirm("从列表中移除该服务器，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              axios
                .post("/api/removeServer", {
                  server_name: row.server_name,
                  server_host: row.server_host,
                })
                .then((response) => {
                  this.getServers();
                  this.$message({
                    type: response.data.message_type,
                    message: response.data.message,
                  });
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        },
      },
      created() {
        this.getServers();
      },
    });
  </script>
</html>
